<template>
	<view>
		<view class="user-box">
			<view class="user-info">
				<view>{{userInfo.fname}}</view>
				<view style="width: 50vw;">简介：{{userInfo.fdesc}}</view>
			</view>
			<image :src="userInfo.favatar"
				mode=""></image>
		</view>
		<view>
			<image src='../../static/bgimg/wave.gif'
			 mode='scaleToFill' class='gif-wave'></image>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="attach" title="增加灌溉" @tap="undo"></u-cell-item>
				<u-cell-item icon="account" title="个人信息" @tap="toInfo"></u-cell-item>
				<u-cell-item icon="server-fill" title="联系客服" @tap="undo"></u-cell-item>
				<u-cell-item icon="tags" title="电子签名" @tap="toSign"></u-cell-item>
				<u-cell-item icon="bookmark" title="检查更新" @tap="openModal"></u-cell-item>
				</button>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="setting" title="设置" @tap="undo"></u-cell-item>
			</u-cell-group>
		</view>
		
		<u-modal v-model="showModal" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel" @confirm="confirm">
			<view class="u-update-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {getUser,setUser} from '@/common/entity/user.js'
	import {getUserInfoById} from "@/common/api/user.js"
	export default {
		data() {
			return {
				pic: 'https://uviewui.com/common/logo.png',
				show: true,
				showModal: false,
				content: `
					1. 修复badge组件的size参数无效问题<br>
					2. 新增Modal模态框组件<br>
					3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
					4. 修复键盘组件在微信小程序上遮罩无效的问题
				`,
				userInfo:{
					fname:'刘智雄',
					fdesc:'阳光的农场主',
					favatar:`../../static/farm/${Math.floor(Math.random()*10)}.jpg`
				}
			}
		},
		onLoad() {
			let user = getUser()
			this.userInfo.fname = user.username
			this.userInfo.fdesc = "来自"+user.place.split("-").join("")+"农场主"
		},
		onPullDownRefresh() {
			console.log('refresh');
			getUserInfoById(getUser().id).then(res=>{
				setUser(res[1].data.data)
				let user = res[1].data.data
				this.userInfo.fname = user.username
				this.userInfo.fdesc = "来自"+user.place.split("-").join("")+"农场主"
				this.$u.toast("数据加载成功")
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			toInfo() {
				uni.navigateTo({
					url:"../info/info"
				})
			},
			cancel() {
				this.closeModal();
			},
			confirm() {
				this.closeModal();
			},
			closeModal() {
				this.showModal = false
			},
			openModal(){
				this.showModal = true
			},
			
			undo(){
				uni.showToast({
				    title: '暂未开放,敬请期待',
					icon: 'none',
				    duration: 2000
				});
			},
			
			toSign(){
				uni.navigateTo({
					url:'../sign/sign'
				})
			}
		}
	}
</script>

<style lang="scss">
	.gif-wave {
		position: absolute;
		width: 100%;
		top: 360rpx;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}
	
	.u-full-content {
		background-color: #00C777;
	}
	
	.u-update-content {
		font-size: 26rpx;
		color: $u-content-color;
		line-height: 1.7;
		padding: 30rpx;
	}
	
	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-image: url('../../static/bgimg/15.png');
		// background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4124071274,1820528533&fm=26&gp=0.jpg');
		// background-position: 32rpx -12rpx;
		height: 450rpx;
		background-size: center;
		// filter:blur(5rpx);
	}

	.user-box {
		display: flex;
		align-items: center;
		justify-content: center;

		.user-info {
			margin-right: 80rpx;
			color: #777941;
			font-weight: bold;

			view:first-child {
				font-size: 50rpx;
				margin-bottom: 20rpx;
			}
		}

		image {
			height: 150rpx;
			width: 150rpx;
			border-radius: 50%;
		}
	}
</style>
